import React, { useState } from 'react';
import style from './index.module.less';
import img1 from '../style/imgs/frequentlyAsk/title.png';

const FrequentlyAsk = () => {
    const [tabActive, setTabActive] = useState<number>(1);
    function handleTab(num: number) {
        setTabActive(num);
    }
    const [flowList, setFlowList] = useState<any[]>([
        {
            title: '提交稿件',
            desic:
                '请您提供真实完整稿件，并填写评估回执表，按照客服提示将稿件和回执表发至指定邮箱。',
        },
        { title: '专家评估', desic: '资深专家团队针对文章进行全面、专业的评估。' },
        {
            title: '签订服务协议',
            desic: '评估通过后，双方签订合作协议（稿件如需润色修改及翻译，根据需要收取服务费）。',
        },
        {
            title: '成功录用',
            desic: '协助投放 稿件获得SCI收录杂志录用通知后，可向编辑部确认核实再办理后期费用。',
        },
    ]);
    const [confidentiality, setConfidentiality] = useState<any[]>([
        {
            title: '论文的安全性与保密性',
            desic:
                '投必得SCI论文编辑坚持遵守100％的严格保密性。我们所有的员工和编辑签订保密协议，绝不会提供任何客户信息给第三方，除非客户书面授权。我们相信， 客户交给投必得修改的每一篇论文都汇集了几个月甚至几年的辛勤工作和创新心血。如果因为在最后关头因信息外泄而遭致知识产权损失，是任何一方都不愿看的结果。因此，投必得在此方面对我们的客户在知识产权保护方面有多重保护',
        },
        {
            title: '系统的职业道德教育监督',
            desic:
                '所有团队成员均已签署具有法律效力的《保密协议》，确保任何信息（包括个人信息及文章内容）不会有第三方知道。如果有您的任何信息（包括个人信息及文章内容）由编辑向第三方透露，我们将根据签订的协议采取法律措施',
        },
        {
            title: '网站信息传递安全保障',
            desic:
                '我们采用先进的网络安全措施（物理措施、访问控制、数据加密 、网络隔离、PIX 防火墙技术等）以保证文章内容及数据传输的安全性。此外，我们在服务器上设置了多个安全层。投必得系统工程师和网络管理员对整个系统进行实时监控以保证网络安全性',
        },
    ]);
    const [askList, setAskList] = useState<any[]>([
        {
            q: '能开发票吗？发票内容有哪些？',
            a: [
                '可以。我们的总公司在美国首都华盛顿地区，可以开具Invoice；国内分公司位于北京，可以免费开具国内正规发票，可以是电子发票和纸质发票。国外发票即Invoice，根据实际服务内容填写；国内发票是正规的机打发票，可以开文章编辑服务费、文章修改服务费、文章润色服务费、文章翻译服务费和论文审稿服务费等。',
            ],
        },
        {
            q: '如何支付费用？',
            a: [
                '我们有三种支付方式，按照对客户的便利程度依次排列如下：',
                '1.万方寰宇官网提供在线支付方式，包括支付宝支付、微信支付；',
                '2.银行汇款：开户行是 招商银行股份有限公司北京西三环支行，账号为110923495110202，所有人为 北京万方寰宇文化传播有限公司；',
                '3.第三方电子支付链接，我们通过国外的第三方支付平台WAVE（https://www.waveapps.com/）发送电子支付链接到您的邮箱，您可以通过信用卡支付美元；',
            ],
        },
    ]);
    return (
        <>
            <div className={style.header}>
                <div className={style.mask} />
                <span>
                    {tabActive === 1 ? '服务流程' : tabActive === 2 ? '保密协议' : '常见问题'}
                </span>
            </div>
            <div className={style.frequentlyAsk_body}>
                <div className={style.tabs}>
                    <div
                        className={`${style.tab} ${tabActive === 1 ? style.active : ''}`}
                        onClick={() => handleTab(1)}
                    >
                        服务流程
                    </div>
                    <div
                        className={`${style.tab} ${tabActive === 2 ? style.active : ''}`}
                        onClick={() => handleTab(2)}
                    >
                        保密协议
                    </div>
                    <div
                        className={`${style.tab} ${tabActive === 3 ? style.active : ''}`}
                        onClick={() => handleTab(3)}
                    >
                        常见问题
                    </div>
                </div>
                <div className={style.content}>
                    {tabActive === 1 && (
                        <div className={style.flow_content}>
                            {flowList.map((item: any, index: number) => {
                                return (
                                    <div className={style.flow_item} key={index}>
                                        <div className={style.flow_item_title}>
                                            0{index + 1}&nbsp;&nbsp;{item.title}
                                        </div>
                                        <div className={style.flow_item_desic}>{item.desic}</div>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                    {tabActive === 2 && (
                        <div className={style.flow_content}>
                            {confidentiality.map((item: any, index: number) => {
                                return (
                                    <div className={style.flow_item} key={index}>
                                        <div className={style.flow_item_title}>
                                            0{index + 1}&nbsp;&nbsp;{item.title}
                                        </div>
                                        <div className={style.flow_item_desic}>{item.desic}</div>
                                    </div>
                                );
                            })}
                        </div>
                    )}
                    {tabActive === 3 &&
                        askList.map((item: any, index: number) => {
                            return (
                                <div className={style.problem_body} key={index}>
                                    <div className={style.problem_q}>
                                        <div className={style.q_icon}>Q</div>
                                        <div>{item.q}</div>
                                    </div>
                                    <div className={style.problem_a}>
                                        <div className={style.a_icon}>A</div>
                                        <div>
                                            {item.a.map((itemx: any, indexx: number) => {
                                                return <div key={indexx}>{itemx}</div>;
                                            })}
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                </div>
            </div>
        </>
    );
};

export default FrequentlyAsk;
